<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<title>查询统计管理</title>
<meta name="decorator" content="default"/>
<script src="${ctxStatic}/common/change/change.js"></script>
<script src="${ctxStatic}/echarts/echarts.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	initVaccName(inventoryDetail.companyCode,inventoryDetail.vaccineId);
	initVaccCompanyName(inventoryDetail.companyCode);
	$(".vaccineCompany").change(function(){
		var vaccId = $(this).val();
		initCompanyName($(this).val());
		if(vaccId == ""){
			initVaccCompanyName("");
		}
	});
	$("#btnFolw").click(function(){
		var arr=new Array();  
		$('input[name="grade"]:checked').each(function(){  
		    arr.push($(this).val());//向数组中添加元素  
		});  
		var grade=arr.join(',');//将数组元素连接起来以构建一个字符串 
 		var url = "${ctx}/area/vaccinate/vaccFlowShow?grade="+grade
 				+"&vaccineId="+$("#vaccineId").val()
 				+"&companyCode="+$("#companyCode").val()
 				+"&batchNo="+$("#batchNo").val()
 				+"&beginDate="+$("#beginDate").val()
 				+"&endDate="+$("#endDate").val()
 				+"&storeCode="+$("#storeCodeId").val();
 		layer.open({
			type : 2,
			title : '疫苗流向订单信息',
			shadeClose : true,
			shade : 0.8,
			maxmin: true,
			area : [screen.availWidth * 0.7 + 'px', screen.availHeight * 0.6 + 'px' ],
			content : url
		});
	});
	$(document).on("click","#btnReset",function(){
		$("#vaccineId").val("").select2();
		$("#companyCode").val("").select2();
		$("#beginDate").val("");
		$("#endDate").val("");
		$("#batchNo").val("");
		$("#storeCodeId").val("");
		$("#storeCodeName").val("");
		$("#grade").val("");
	});
	// 基于准备好的dom，初始化echarts图表
	var myChart = echarts.init(document.getElementById('vaccineFlowEchartsShow'));
	// 为echarts对象加载数据 
	myChart.setOption(option);
	// 处理点击事件并且跳转到相应的百度搜索页面
	myChart.on('click', function (params) {
		if(params.dataType =="node"){
			var str = encodeURIComponent(params.data.name);
		}else{
			var str = encodeURIComponent(params.data.source)+"-"+encodeURIComponent(params.data.sourceCode)+encodeURIComponent(encodeURIComponent(">"))+encodeURIComponent(params.data.target);
		}
		$("#str").val(str);
	    var url = "${ctx}/area/vaccinate/showOrderFlow?str="+ str+"&grade="+$("#gradeOld").val()
	    	+"&vaccineId="+$("#vaccineIdOld").val()+"&companyCode="+$("#companyCodeOld").val()+
	    "&batchNo="+$("#batchNoOld").val()+"&beginDate="+$("#beginDateOld").val()+"&endDate="+$("#endDateOld").val()
	    +"&storeCode="+$("#storeCodeId").val();
		layer.open({
			type : 2,
			title : '疫苗流向订单信息',
			shadeClose : true,
			shade : 0.8,
			maxmin: true,
			area : [screen.availWidth * 0.7 + 'px', screen.availHeight * 0.6 + 'px' ],
			content : url
		});
	});
});
var inventoryDetail = JSON.parse('${fns:toJson(inventoryDetail)}');
option = {
    title: {
        text: JSON.parse('${fns:toJson(str)}')
    },
    tooltip: {
    	show:true,
    	trigger: 'item',
    	formatter:function(a){
    		if(a.dataType == 'edge'){
    			return a.data.sourceCode+" > "+a.data.targetCode;
    		}else if(a.dataType == 'node'){
    			return a.data.name;
    		}else{
    			return a.name;
    		}
    	}
    },
    animationDurationUpdate: 2000,
    animationEasingUpdate: 'quinticInOut',
    series : [ {
       color:'#ffffff',
       type: 'graph',
       layout: 'none',
       symbolSize: 55,
       // roam: true, 可移动整个流向图
       label: {
           normal: {
               show: true,
               color: 'black',
               //回调函数，你期望节点标签上显示什么
               formatter: function(params){
            	   if(params.data.code.length>6){
            		   var str = params.data.code.substring(0,6);
            		   var sttr = params.data.code.substring(6,params.data.code.length)
            		   return str+"\n"+sttr;
            	   }else{
                      return params.data.code;
            	   }
               },
           }
       },
       animation: true,//是否开启动画
       symbol:'roundRect',
       focusNodeAdjacency:true,
       cursor: 'pointer',
       symbolRotate:'arrow',
       edgeSymbol: ['diamond', 'arrow'],
       edgeSymbolSize: [4, 10],
       edgeLabel: {
           normal: {
               textStyle: {
                   fontSize: 10
               }
           }
       },
       data: JSON.parse('${fns:toJson(point)}'),
       itemStyle: {
           normal: {
               color: '#6dc8ef'
           }
       },
       links: JSON.parse('${fns:toJson(link)}'),
       lineStyle: {
           normal: {
           	color: 'black',
               opacity: 0.6,
               width: 1,
               curveness:0.1
           }
       },
    } ]
};
function page(n,s){
	$("#pageNo").val(n);
	$("#pageSize").val(s);
	$("#searchForm").submit();
	return false;
}
</script>
<style type="text/css">
	.minWidth {
		min-width: 177px;
	}	
</style>
</head>
<body>
    <c:if test="${layer != true}">
		<ul class="nav nav-tabs">
		    <li class="active"><a href="#">疫苗出入库流向查询</a></li>
		</ul>
	</c:if>
	<form:form id="searchForm" modelAttribute="inventoryDetail" action="${ctx}/area/vaccinate/queryLocation" method="post" class="breadcrumb form-search">
		<input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}"/>
		<input id="pageSize" name="pageSize" type="hidden" value="${page.pageSize}"/>
		<input id="vaccineIdOld" name="vaccineIdOld" type="hidden" value="${inventoryDetail.vaccineId}"/>
		<input id="companyCodeOld" name="companyCodeOld" type="hidden" value="${inventoryDetail.companyCode}"/>
		<input id="batchNoOld" name="batchNoOld" type="hidden" value="${inventoryDetail.batchNo}"/>
		<input id="gradeOld" name="gradeOld" type="hidden" value="${fn:join(inventoryDetail.grade,',')}"/>
		<input id="beginDateOld" name="beginDateOld" type="hidden" value="<fmt:formatDate value="${inventoryDetail.beginDate}" pattern="yyyy-MM-dd"/>"/>
		<input id="endDateOld" name="endDateOld" type="hidden" value="<fmt:formatDate value="${inventoryDetail.endDate}" pattern="yyyy-MM-dd"/>"/>
		<input id="str" type="hidden" name="str">
		<input id="layer" type="hidden" name="layer" value="${layer}">
		<div class="breadcrumb">
			<table class="table table-bordered">
				<tr>
				    <th>疫苗名称:</th>
					<td>
						<form:select path="vaccineId" id="vaccineId" class="span2 minWidth vaccineCompany" >
							<form:option value="" label="--请选择--"/>
						</form:select>
					</td>
					<th>生产企业：</th>
					<td>
						<form:select path="companyCode" id="companyCode" class="span2 minWidth changeCompany vaccCompanyName">
						    <form:option value="" label="--请选择--"/> 
						</form:select>
					</td>
					<th>批号</th>
					<td>
						<form:input path="batchNo" id="batchNo" class="span2 minWidth"/>
					</td>
				</tr>
			    <tr>
				    <th>地区</th>
					<td>
						<sys:treeselect2 id="storeCode" name="storeCode" value="${inventoryDetail.storeCode}" labelName="storeName" labelValue="${inventoryDetail.storeName}"
					    title="机构" url="/sys/office/treeData" cssClass="input-medium" layer = "true" disabled = "${office.grade == '50' ? 'disabled' : 'false'}"/>
					</td>
					<th>查询范围</th>
					<td colspan="3">
						<form:checkboxes path="grade" items="${fns:getDictList('sys_office_grade_3')}" values="${inventoryDetail.grade}" itemLabel="label" itemValue="value"/>
					</td>
				</tr>
				<tr>
					<th>起始日期</th>
					<td>
						<input name="beginDate" id ="beginDate" type="text" readonly="readonly" maxlength="20" class="input-medium Wdate"
							value="<fmt:formatDate value="${inventoryDetail.beginDate}" pattern="yyyy-MM-dd"/>"
							onclick="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:true});"/>
					</td>
					<th>截止日期</th>
					<td colspan="3">
						<input name="endDate" id ="endDate" type="text" readonly="readonly" maxlength="20" class="input-medium Wdate"
							value="<fmt:formatDate value="${inventoryDetail.endDate}" pattern="yyyy-MM-dd"/>"
							onclick="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:true});"/>
					</td>
				</tr>
			</table>
		</div>
		<button id="btnSubmit" class="btn btn-primary" type="submit">查询</button>
		<button id="btnReset" type="button" class="btn btn-primary">重置</button>
		<button id="btnFolw" class="btn btn-primary" type="button">数据显示</button>
	</form:form>
	<sys:message content="${message}"/>
	<!-- echarts图表 -->
	<div id="vaccineFlowEchartsShow"  style="width:1600px; height:550px;position: absolute;"></div>
</body>
</html>